<template>
  <view class="single_settings_container">
    <custom-nav-bar title="好友设置" />

    <view class="row_wrap">
      <view class="setting_row info_row">
        <view @click="toUserCard" class="user_info">
          <my-avatar
            :src="storeCurrentConversation.faceURL"
            :desc="storeCurrentConversation.showName"
            size="46"
          />
        </view>
        <view @click="invite2group" class="action">
          <image
            style="width: 46px; height: 46px"
            src="@/static/images/single_setting_add.png"
            alt=""
          />
        </view>
      </view>
      
      <view class="setting_row">
        <u-cell title="阅后即焚" :border="false">
          <u-switch
            slot="right-icon"
            v-model="checked"
            @change="change"
            :loading="loading"
          >
          </u-switch>
        </u-cell>
        <u-cell
          title="时间设置"
          :isLink="true"
          :border="false"
          :value="curItem.name"
          :closeOnClickAction="true"
          @click="() => {
            show = true
          }"
          v-if="checked"
        >
        </u-cell>
      </view>

    </view>

    <u-action-sheet
      :actions="list"
      :show="show"
      cancelText="取消"
      @select="selectClick"
      @close="onClose"
      :closeOnClickAction="false"
    ></u-action-sheet>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import CustomNavBar from "@/components/CustomNavBar/index.vue";
import MyAvatar from "@/components/MyAvatar/index.vue";
import SettingItem from "@/components/SettingItem/index.vue";
import IMSDK  from "openim-uniapp-polyfill";
export default {
  components: {
    CustomNavBar,
    MyAvatar,
    SettingItem,
  },
  props: {},
  data() {
    return {
      checked: false,
      curItem: {},
      loading: false,
      list: [
        {
          name: '30秒',
          value: 30,
        },
        {
          name: '5分钟',
          value: 300,
        },
        {
          name: '1小时',
          value: 3600,
        },
        {
          name: '1天',
          value: 86400,
        },
      ],
      show: false,
    };
  },
  computed: {
    ...mapGetters([
      "storeCurrentConversation"
    ]),
  },
  mounted() {
    console.log(this.storeCurrentConversation,'this.storeCurrentConversation.isPrivateChat');
    this.checked = this.storeCurrentConversation.isPrivateChat
    this.curItem = this.list.find(item => item.value === this.storeCurrentConversation.burnDuration) || {}
  },
  methods: {
    selectClick(item) {
      this.curItem = item || this.list[0]
      IMSDK.asyncApi('setConversationBurnDuration', IMSDK.uuid(), {
        conversationID: this.storeCurrentConversation.conversationID,
        burnDuration: this.curItem.value,
      })
      .then(({ data }) => {
        // 调用成功
        this.show = false
      })
    },
    onClose() {
      this.show = false
    },
    change(e) {
      console.log(e, 'eeeeee');
      this.loading = true
      IMSDK.asyncApi('setConversationPrivateChat', IMSDK.uuid(), {
        conversationID: this.storeCurrentConversation.conversationID,
        isPrivate: e,
      })
      .then(({ data }) => {
        // 调用成功
        console.log(data,'调用成功');
        this.checked = e;
        this.loading = false;
        if(e) {
          this.selectClick()
        }
      })
      .catch(() => {
        // 调用失败
        this.loading = false
      });
    },
    toUserCard() {
      uni.navigateTo({
        url: `/pages/common/userCard/index?sourceID=${this.storeCurrentConversation.userID}`,
      });
    },
    invite2group() {
      const checkedMemberList = JSON.stringify([
        {
          userID: this.storeCurrentConversation.userID,
          faceURL: this.storeCurrentConversation.faceURL,
          nickname: this.storeCurrentConversation.showName,
        },
      ]);
      uni.navigateTo({
        url: `/pages/common/createGroup/index?checkedMemberList=${checkedMemberList}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.single_settings_container {
  @include colBox(false);
  height: 100vh;
  background-color: #f6f6f6;

  .row_wrap {
    flex: 1;
    overflow-y: auto;
  }

  .setting_row {
    margin: 24rpx 24rpx 0 24rpx;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
  }

  .info_row {
    display: flex;
    align-items: center;
    padding: 44rpx;

    .user_info {
      @include colBox(false);
      margin-right: 36rpx;

      .user_name {
        margin-top: 20rpx;
        color: #666;
      }
    }
  }
}
</style>
